<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>继续教育-考试信息管理</title>
		<style>
		  .demo-table-expand {
			font-size: 0;
		  }
		  .demo-table-expand label {
			width: 90px;
			color: #99a9bf;
		  }
		  .demo-table-expand .el-form-item {
			margin-right: 0;
			margin-bottom: 0;
			width: 100%;
		  }
		  .downland{
			  padding: 3px 15px;
			  border: solid 1px #409EFF;
			  color: #409EFF;
			  font-size: 14px;
			  background: none;
			  margin-top: 20px;
			  display: table;
			  overflow: hidden;
			  border-radius: 3px;
			  cursor: pointer;
		  }
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				继续教育-考试信息管理
			</div>
			<div class="pd10">		
				<el-form :inline="true" :model="formInline" class="demo-form-inline">	
					<el-form-item>
						<el-select v-model="formInline.isPass" placeholder="是否通过" clearable>
							<el-option :label="item.label" :value="item.value" v-for="item in throughArr" :key="item.label"></el-option>
						</el-select>
					</el-form-item>				
					<el-form-item>
						<el-input v-model="formInline.mobile" type="text" placeholder="请输入考生账号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="formInline.uname" type="text" placeholder="请输入考生姓名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="formInline.etId" type="text" placeholder="请输入批次"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table
						:data="tableData"
						style="width: 100%"
						ref="multipleTable"
						:row-key="getRowKey"
						@selection-change="handleSelectionChange"
						@expand-change="expandChange"
				>
					<el-table-column
							type="selection"
							:reserve-selection="true"
							width="55">
					</el-table-column>
					<el-table-column type="expand" >
					  <template slot-scope="scope">
						<el-form label-position="left" inline class="demo-table-expand">
							<template v-for="(item,index) in subTableData">									
								<el-form-item :label="item.etype_title" >
									<span>{{item.sumScore}}分</span>
								</el-form-item>
							</template>						  
						</el-form>
					  </template>
					</el-table-column>
					<el-table-column prop="mobile" label="考生账号"></el-table-column>
					<el-table-column prop="username" label="姓名"></el-table-column>
					<el-table-column prop="score" label="总成绩"></el-table-column>
					<el-table-column prop="isPass" label="是否通过">
						<template slot-scope="scope">
							{{({"0":"未通过","1":"通过"}[scope.row.isPass])}}
						</template>
					</el-table-column>
					<el-table-column prop="province" label="省行"></el-table-column>
					<el-table-column prop="isDt" label="投连">
						<template slot-scope="scope">
							{{({"0":"否","1":"是"}[scope.row.isDt])}}
						</template>
					</el-table-column>
					<el-table-column prop="city" label="市行"></el-table-column>
					<el-table-column prop="subBank" label="支行"></el-table-column>
					<el-table-column prop="location" label="网点"></el-table-column>
					<el-table-column prop="examTime" label="考核时间" width="160"></el-table-column>
				  </el-table>
				<el-table
						style="display:none;"
						:data="multipleSelection"
						style="width: 100%"
						id="outTable"
				>
					<el-table-column prop="mobile" label="考生账号"></el-table-column>
					<el-table-column prop="username" label="姓名"></el-table-column>
					<el-table-column prop="score" label="总成绩"></el-table-column>
					<el-table-column prop="isPass" label="是否通过">
						<template slot-scope="scope">
							{{({"0":"未通过","1":"通过"}[scope.row.isPass])}}
						</template>
					</el-table-column>
					<el-table-column prop="province" label="省行"></el-table-column>
					<el-table-column prop="isDt" label="投连">
						<template slot-scope="scope">
							{{({"0":"否","1":"是"}[scope.row.isDt])}}
						</template>
					</el-table-column>
					<el-table-column prop="city" label="市行"></el-table-column>
					<el-table-column prop="subBank" label="支行"></el-table-column>
					<el-table-column prop="location" label="网点"></el-table-column>
					<el-table-column prop="examTime" label="考核时间" width="160"></el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-table
						style="display:none;"
						:data="multipleSelectionAll"
						style="width: 100%"
						id="outTableAll"
				>
					<el-table-column prop="mobile" label="考生账号"></el-table-column>
					<el-table-column prop="username" label="姓名"></el-table-column>
					<el-table-column prop="score" label="总成绩"></el-table-column>
					<el-table-column prop="isPass" label="是否通过">
						<template slot-scope="scope">
							{{({"0":"未通过","1":"通过"}[scope.row.isPass])}}
						</template>
					</el-table-column>
					<el-table-column prop="province" label="省行"></el-table-column>
					<el-table-column prop="isDt" label="投连">
						<template slot-scope="scope">
							{{({"0":"否","1":"是"}[scope.row.isDt])}}
						</template>
					</el-table-column>
					<el-table-column prop="city" label="市行"></el-table-column>
					<el-table-column prop="subBank" label="支行"></el-table-column>
					<el-table-column prop="location" label="网点"></el-table-column>
					<el-table-column prop="examTime" label="考核时间" width="160"></el-table-column>
				</el-table>
				<div class="bottomstate">
<!--					<el-button type="success" size="mini" icon="el-icon-download" style="margin-top: 10px"-->
<!--							   @click="exportExcel">批量导出 class="downland"-->
<!--					</el-button>-->
					<a id="downland" @click="exportExcel" class="downland f-l" style="margin-right:20px;">批量导出</a>
					<a id="downlandAll" @click="exportExcelAll" class="downland f-l">全部导出</a>
					<el-pagination class="f-r mt5" background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total,prev, pager, next,jumper"
					 :total="total" ></el-pagination>
				</div>
			</div>			
		</div>
	</body>
	<script src="/jeefast/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/js/axios.js"></script>
	<script src="/jeefast/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					formInline:{
						isPass:"",
						mobile:"",
						uname:"",
						etId:"",
					},
					multipleSelection: [],
					multipleSelectionAll: [],
					throughArr:[{
						value: '1',
						label: '通过'
					},{
						value: '0',
						label: '未通过'
					}],
					tableData: [],	
					total:0,
					// 要展开的内容
					subTableData: [],
					changeArr:[]
				}
			},
			methods: {
				getRowKey:function(row){
					return row.mobile
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				exportExcel:function(){
					if(this.multipleSelection.length>0){
						let str = document.getElementById("outTable").innerHTML
						var html = "<html><head><meta charset='utf-8' /></head><body>" + str + "</body></html>";
						// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
						var blob = new Blob([html], { type: "application/vnd.ms-excel" });
						var a = document.getElementById("downland");
						// 利用URL.createObjectURL()方法为a元素生成blob URL
						a.href = URL.createObjectURL(blob);
						// 设置文件名
						a.download = "导出.xls";
					}else{
						this.$message.warning('未选择内容')
						return;
					}
				},
				exportExcelAll:function(){
					let str = document.getElementById("outTableAll").innerHTML
					var html = "<html><head><meta charset='utf-8' /></head><body>" + str + "</body></html>";
					// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
					var blob = new Blob([html], { type: "application/vnd.ms-excel" });
					var a = document.getElementById("downlandAll");
					// 利用URL.createObjectURL()方法为a元素生成blob URL
					a.href = URL.createObjectURL(blob);
					// 设置文件名
					a.download = "导出.xls";
				},
				projexamListAll:function(){
					let that = this;
					//查询全部结果
					let params={
						isPass:this.formInline.isPass, //1 通过 0 未通过 不选不传
						mobile:this.formInline.mobile,
						uname:this.formInline.uname,
						etId:this.formInline.etId,
						page: 1, //起始页面
						limit: 999999, //每页显示个数
					}
					projexamList(params).then(res=>{
						if(res.data.code==0){
							that.multipleSelectionAll= res.data.data.list
						}
					})
				},
				downloadExcel() {
					console.log(this.changeArr);
					let that = this;
					var ids = [];
					$.each(that.changeArr, function (k, v) {
						ids.push(v.mobile);
					})
					if (ids.length == 0) {
						console.log("长度为0")
						return false;
					}
					// var url = baseURL + that.excelExportUrl + '?token=' + token + "&userIdList=" + ids;
					// var url = "http://www.baidu.com"
					window.top.location.href = url;
				},
				search:function(){
					this.getTable()
				},
				getTable:function(){
					let that = this
					let params={
						isPass:this.formInline.isPass, //1 通过 0 未通过 不选不传
						mobile:this.formInline.mobile,
						uname:this.formInline.uname,
						etId:this.formInline.etId,
						page: this.page, //起始页面
						limit: this.limit, //每页显示个数
					}
					projexamList(params).then(res=>{
						console.log(res);
						if(res.data.code==0){
							that.tableData= res.data.data.list
							that.total=res.data.data.count
						}
					})
				},
				expandChange:function(row,expandedRows){
					let that = this
					//恢复默认值
					that.subTableData = []					
					eduInfoDetail({mobile:row.mobile,etId:row.etId}).then(res=>{
						console.log(res);
						if(res.data.code==0){
							that.subTableData=res.data.data
						}
					})
					if (expandedRows.length > 1) {
						//只展开当前选项
						existpandedRows.shift()
					}
				},				
			},
			created() {
				this.getTable()
				this.projexamListAll()
			},
		});
	</script>
</html>
